<template>
  <div class="guanfa-main-con">
    <div class="guanfa_title">
      <span>关阀分析</span>
    </div>

    <div class="btnGroup1">
      <span>阀门：</span> <el-select v-model="value" placeholder="请选择阀门" clearable>
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" size="small" class="optionItem" >
        </el-option>
      </el-select>




    </div>
    <div class="btnGroup">
      <div class="handleBtn" @click="gffxend">
        <span>重置</span>
      </div>
      <div class="clearResult" @click="gffxstart">
        <span>分析</span>
      </div>
    </div>
    <!-- <div class="guanfa_form">
      <el-select v-model="value" placeholder="请选择" clearable>
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <button @click="gffxend">清除</button>
      <button @click="gffxstart">分析</button>

    </div> -->

    <div class="guanfa_result" v-show="isShowResult">
      <!-- <div class="guanfa_result_line"></div> -->
      <div class="guanfa_result_title">
        <span>查询结果</span>
      </div>
      <!-- <div style="color: #ffffff;" class="baoGuanResultItem">
        <ul v-for="(item,i) in gffxdata" :key="i">
          <li>{{item.name}}</li>
        </ul>
      </div> -->
      <div class="resultList">
          <div class="resultItemContent">
            <div class="resultItem" v-for="(item,i) in gffxdata" :key="i" >
              <span>{{item.name}}</span>
            </div>
          </div>
        </div>

    </div>
  </div>
</template>

<script>

  import Bus from "@/js/EventBus";
  import { getgffxData, getBoxLineData } from "@/api/http"
  export default {
    name: "GuanFaAnalysis",
    components: {

    },
    computed: {
      famendata () {
        return this.$store.getters.famendata;
      },
    },
    mounted () {
      this.initopentisdata()
    },
    data () {
      return {

        valueMultiple: [],
        options: [],
        value: '',
        gffxdata: [],
        isShowResult: false,
      };
    },

    methods: {
      // Valve closing analysis
      initopentisdata () {
        // console.log(this.famendata)
        this.famendata.features.forEach(element => {
          if (element.properties.FM == '1') {
            let lonlat = [element.properties.x, element.properties.y]
            let idData = {
             deviceId: element.properties.device_id,
      };
            this.options.push(
              {
                value: JSON.stringify([element.properties.source, lonlat,JSON.stringify(idData)]),
                label: element.properties.address__1
                // label: element.properties.address_na
              }
            )
          }


          // console.log(element)
          // let idData = {
          //   deviceId: element.properties.device_id,
          //   // jctype: element.properties.type,
          //   // sttp: element.properties.sttp,
          // };
          // this.options.push(
          //   {
          //     value: JSON.stringify([element.properties.SPOINT, JSON.stringify(idData)]),
          //     label: element.properties.address__1
          //     // label: element.properties.address_na
          //   }
          // )
        });

      },
      async gffxstart () {
        let params = JSON.parse(this.value)
        // console.log(params,"params=======================")
        Bus.$emit("addpoint", params[2]);
        Bus.$emit("dingwei", [params[1][0],params[1][1],15000]);

        // console.log(params)
        // const res1 = await getBoxLineData(`SPOINT='${params[0]}'`)
        // console.log(res1, "===========")
        // res1.features[0].properties.source
        // let params = JSON.parse(this.value)
        // console.log(params)
        const { data: res } = await getgffxData(params[0])
        // console.log(res, "res1======================")

        if (res) {
          this.gffxdata = res
          // Bus.$emit("gffx", true, res);
          res.forEach(element => {
            let idData = {
              UserID: element.userid

            };
            Bus.$emit("addlinecolor", JSON.stringify(idData));
          });

          this.isShowResult = true;
        }

      },
      gffxend () {
        this.value = '';
        this.gffxdata = [];
        Bus.$emit("gffx", false);
        // Bus.$emit("removepoint", false);
        this.isShowResult = false;
      }

    },
  };
</script>

<style lang="scss" scoped>
  .guanfa-main-con {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 301px;
    height: 712px;
    background: url('../../assets/rightMenu/selectInfo/selectInfo_bg.png');
    background-size: 100% 100%;
  }

  .btnGroup1 {
    padding: 20px 20px 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .handleBtn,
    .clearResult {
      width: 100px;
      height: 28px;
      background: url(../../assets/panelTree/btn-uncheck.png);
      text-align: center;
      margin: 10px 0 0 10px;
      cursor: pointer;
    }

    span {
      font-family: SourceHanSansCN-Medium;
      font-size: 12px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 28px;
      letter-spacing: 1px;
      /* color: #00baff; */
      color: #b9ddf5;
    }

    .optionItem {
      background-color: red;
    }
  }

  .btnGroup {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px 10px 30px;
    text-align: center;

    .handleBtn,
    .clearResult {
      width: 100px;
      height: 28px;
      background: url(../../assets/panelTree/btn-uncheck.png);
      text-align: center;
      margin: 10px 0 0 10px;
      cursor: pointer;
    }

    span {
      font-family: SourceHanSansCN-Medium;
      font-size: 12px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 28px;
      letter-spacing: 1px;
      color: #fff;
    }
  }

  .baoGuanResultItem {
    margin: 10px 30px 0 20px;
    /* width: 200px; */
    /* text-align: left; */
    font-family: SourceHanSansCN-Regular;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    /* line-height: 18px; */
    letter-spacing: 0px;
    color: #daf0ff;
    /* padding-left: 6px; */

  }

  .guanfa_title {
    width: 280px;
    height: 35px;
    box-sizing: border-box;
    background: url("@/assets/panelTree/dtml_bg_title.png") no-repeat;
    font-family: SourceHanSansCN-Regular;
    font-size: 18px;
    background-size: 100% 100%;
    text-align: left;
    padding-left: 50px;
    line-height: 34px;
    // background-color: red;
    margin: 10px 0 0 10px;
  }

  .guanfa_title span {
    font-family: SourceHanSansCN-Regular;
    font-size: 14px;
    color: #c8e9ff;
  }

  .guanfa_result_title {
    width: 300px;
    height: 16px;
    background: url("../../assets/rightMenu/selectInfo/monitor_form_title.png") 0px 2px no-repeat;
    text-align: center;
    color: #00baff;
    margin-bottom: 20px;
  }

  .guanfa_result_title span {
    font-family: SourceHanSansCN-Regular;
    font-size: 14px;
    line-height: 12px;
  }

  .guanfa_result {
    flex: 1;
  }

  .guanfa_result_line {
    width: 289px;
    height: 1px;
    background: url(../../assets/rightMenu/selectInfo/boundary_line.png);
    background-size: 100% 100%;
    margin-bottom: 20px;
  }


  ::v-deep {

    .el-form-item__label {
      font-family: SourceHanSansCN-Regular !important;
      font-size: 14px !important;
      line-height: 44px !important;
      color: #daf0ff !important;
      ;
      padding: 0 0 0 16px !important;
    }
  }

  .resultList {
      padding-left: 20px;
      overflow-y: auto;
      height: 480px;
      margin-right: 10px;

      .resultItemContent {
        .resultItem {
          cursor: pointer;
        }

        span {
          font-size: 12px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 28px;
          letter-spacing: 1px;
          color: #95b0c2;
        }
      }

      &::-webkit-scrollbar {
        width: 4px;
        height: 1px;
        background: rgba(9, 85, 133, 0.8);
        display: block;
        border-radius: 3px;
      }

      /*滚动条里面小方块*/
      &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: #052149
      }

      /*滚动条里面轨道*/
      &::-webkit-scrollbar-track {
        border-radius: 3px;
        background: transparent;
      }
    
  }
</style>